<template>
  <div class="h-full w-full realCard">
    <el-carousel indicator-position="none">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <div class="w-full h-full flex items-center justify-center bg-[yellow]">
          <div
            class="w-full grid gap-4 grid-cols-[repeat(auto-fill,minmax(23.13em,1fr))] justify-center bg-[pink]"
          >
            <div
              class="w-full h-full flex justify-center items-center"
              v-for="(child, cIndex) in item"
              :key="cIndex"
            >
              <div class="card_item bg-[#ccc]">
                {{ child.name }}
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
const originData = ref([
  { id: 1, name: "一" },
  { id: 2, name: "二" },
  { id: 3, name: "三" },
  { id: 4, name: "四" },
  { id: 5, name: "五" },
  { id: 6, name: "六" },
  { id: 7, name: "七" },
  { id: 8, name: "八" },
  { id: 9, name: "九" },
  { id: 10, name: "十" },
  { id: 11, name: "十一" },
  { id: 12, name: "十二" },
  { id: 13, name: "十三" },
  { id: 14, name: "十四" },
  { id: 15, name: "十五" },
  { id: 16, name: "十六" },
  { id: 17, name: "十七" },
  { id: 18, name: "十八" },
  { id: 19, name: "十九" },
  { id: 20, name: "二十" },
  { id: 21, name: "二十一" },
  { id: 22, name: "二十二" },
  { id: 23, name: "二十三" },
  { id: 24, name: "二十四" },
  { id: 25, name: "二十五" },
]);
const currentPageNums = ref(0);
const totalPages = computed(() => {
  return currentPageNums.value > 0
    ? Math.ceil(originData.value.length / currentPageNums.value)
    : 0;
});
const list = computed(() => {
  //根据当前页能显示的数量，分割原始数据成二维数组
  const list = [];
  for (let i = 0; i < totalPages.value; i++) {
    list.push(
      originData.value.slice(
        i * currentPageNums.value,
        (i + 1) * currentPageNums.value
      )
    );
  }
  console.log(list);
  return list;
});

function calculateCardsPerRow() {
  const width = window.innerWidth;
  let fontSize = 16; // 默认字体大小

  if (width < 769) {
    fontSize = 12; // 小平板
  } else if (width < 1025) {
    fontSize = 14; // 大平板 / 小笔记本
  } else if (width < 1921) {
    fontSize = 16;
  } else {
    fontSize = 18; // 大显示器
  }
  //卡片宽度
  const realCardWidth = fontSize * 23.13;
  const realCardHeight = fontSize * 15.19;
  console.log(realCardWidth, realCardHeight, fontSize, width);
  //获取类名为.realCard的元素的宽度
  const realCard = document.querySelector(".realCard");
  const availableCSSWidth = realCard.clientWidth;
  const availableCSSHeight = realCard.clientHeight;
  const countRow = Math.floor(availableCSSWidth / realCardWidth);
  const countColumn = Math.floor(availableCSSHeight / realCardHeight);
  currentPageNums.value = countRow * countColumn;
  console.log(
    `当前一行可显示 ${countRow} 张卡片`,
    `当前一列可显示 ${countColumn} 张卡片`
  );
}
let timer = null;
onMounted(() => {
  //先写死，后面再写逻辑
  currentPageNums.value = 6;
  calculateCardsPerRow();
  window.addEventListener("resize", () => {
    clearTimeout(timer);
    timer = null;
    timer = setTimeout(() => {
      calculateCardsPerRow();
      clearTimeout(timer);
      timer = null;
    }, 100); // 防抖优化
  });
});
</script>
<style lang="scss" scoped>
:deep(.el-carousel) {
  height: 100%;
  background: red;
  .el-carousel__container {
    height: 100%;
  }
}
/* 超小型设备 */
@media (max-width: 768px) {
  .realCard {
    font-size: 12px;
  }
}
/* 大型设备 */
@media (min-width: 769px) and (max-width: 1024px) {
  .realCard {
    font-size: 14px;
  }
}

/* 更大设备 */
@media (min-width: 1025px) and (max-width: 1920px) {
  .realCard {
    font-size: 16px;
  }
}

/* 特大设备 */
@media (min-width: 1921px) {
  .realCard {
    font-size: 18px;
  }
}
.cardList {
  background: green;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.card_item {
  width: 23.13em;
  height: 15.19em;
  border-radius: 1em;
  border: 0.06em solid #e8e8e8;
  box-sizing: border-box;
  padding: 10px;
}
</style>
